<template>
	<view :class="`container ${direction}`">
		<text class="flex-1 font-size-14 font-color-white" @tap>{{ content }}</text>
		<view class="btn" @tap="$emit('click')">{{ btnText }}</view>
		<u-icon v-if="close" class="ml-10" name="close" color="#fff" :size="14" @click="$emit('close')"></u-icon>
	</view>
</template>

<script>
	export default {
		name:"w-suspend-bar",
		props:{
			// 方向
			direction: {
				type: String,
				default: 'bootom'
			},
			// 关闭iocn
			close: {
				type: Boolean,
				default: true
			},
			// 内容
			content: {
				type: String,
				default: ''
			},
			// 按钮文字
			btnText: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 84rpx;
		background-color: rgba(000, 000, 000, .3);
		position: fixed;
		left: 0;
		backdrop-filter: blur(10rpx);
		z-index: 999;
		@extend .flex-center,.plr-13;
		
		.btn{
			width: 120rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			background: $theme-jb-color;
			@extend .font-size-12,.font-color-white,.br-20;
		}
	}
	.bootom{
		bottom: calc(var(--window-bottom) + 0rpx);
	}
	.top{ top:var(--status-bar-height) }
</style>